<!-- src/components/ToolTree.vue -->
<template>
    <div class="tree-container">
      <el-input
        v-model="filterText"
        style="width: 240px"
        placeholder="关键词搜索"
        @input="handleFilter"
      />
      <div class="space" style="height: 20px;"></div>
      <el-tree
        :data="filteredTreeData"
        :props="treeProps"
        class="custom-tree"
        :default-expand-all="true"
        @node-click="handleNodeClick"
      />
    </div>
  </template>
  
  <script>
  import { loadAlgorithms } from '@/utils/loadAlgorithms';
  
  export default {
    data() {
      return {
        treeData: [],
        treeProps: {
          label: 'name',
          children: 'tools',
        },
        filterText: '', // 过滤关键字
      };
    },
    computed: {
      filteredTreeData() {
        if (!this.filterText) {
          return this.treeData; // 如果过滤关键字为空，返回原始数据
        }
        // 过滤树状图数据
        return this.treeData.map(category => ({
          ...category,
          tools: category.tools.filter(tool => tool.name.toLowerCase().includes(this.filterText.toLowerCase())),
        })).filter(category => category.tools.length > 0); // 过滤掉没有匹配工具的分类
      },
    },
    mounted() {
      const categories = loadAlgorithms();
      this.treeData = categories.map(category => ({
        name: category.name,
        tools: category.tools.map(tool => ({
          name: tool.name,
        })),
      }));
    },
    methods: {
      handleFilter() {
        // 可以在这里添加其他处理逻辑，比如实时搜索等
      },
      handleNodeClick(data) {
        if (data.name) {
          this.$router.push(`/doc/${data.name}`);
        }
      },
    },
  };
  </script>
  
  <style scoped>
  .tree-container {
    width: 100%; 
  }
  
  .custom-tree :deep(.el-tree-node__label) {
    font-weight: bold;
    font-size: 18px; /* 调整父节点字体大小 */
    color: black; 
    line-height: 1.5; /* 调整行间距 */
  }
  
  .custom-tree :deep(.el-tree-node__children .el-tree-node__label) {
    font-weight: bold;
    font-size: 16px; /* 调整子节点字体大小 */
    color: #888; 
    line-height: 1.5; /* 调整行间距 */
  }
  </style>
  